<template>
  <div class="albumPage">
    <ul v-if="songs">
        <li class="remarks evenBackground">
        <div class="flex2">
          <p>歌曲</p>
        </div>
        <div>
          <p>作者</p>
        </div>
        <div class="cen">
          <p>专辑</p>
        </div>
      </li>
      <li v-for="(val,index) in songs" :key="index" :class="index%2==1?'evenBackground':''">
        <albumSongs :info="val" />
      </li>
    </ul>
  </div>
</template>

<script>
import require from "requests/getSong";
import albumSongs from "components/searchComponents/albumSongs";
import remark from "components/searchComponents/remark";
export default {
  name: "albumPage",
  data() {
    return {
      songs: null,
      remark: {
        grid1: "歌曲",
        grid2: "歌手",
        grid3: "专辑",
      }
    };
  },
  components: {
    albumSongs,
    remark
  },
  methods: {
    getalbumContent(id) {
      require.albumContent(id).then(res => {
        this.songs = res.data.songs;
        //console.log(this.songs);
      });
    }
  },
  mounted() {
    this.getalbumContent(this.$route.query.keyWord);
  }
};
</script>

<style scoped lang='less'>
.albumPage{
    ul{
        li.remarks {
      display: flex;
      div {
        flex: 1;
        color: #999;
      }
      .flex2 {
        flex: 2;
      }
    }
    }
}
.evenBackground {
  background-color: rgba(0, 0, 0, 0.01);
}
</style>